<template>
  <view class="container">
    <uni-forms
      ref="formRef"
      :model="formData"
      :rules="rules"
      class="form"
      label-position="top"
      label-width="75vw">
      <!-- <uni-forms-item name="businessType" required>
        <view class="title">业务类型</view>
        <uni-data-checkbox
          v-model="formData.businessType"
          :localdata="optionItems">
        </uni-data-checkbox>
      </uni-forms-item> -->

      <uni-forms-item name="customerName" label="客户名称" required>
        <!-- <view class="title"></view> -->
        <uni-data-select
          v-model="customerName"
          :localdata="enterpriseList"
          :clear="false"
          ></uni-data-select>
      </uni-forms-item>

      <uni-forms-item name="merchandiseName" label="货品名称" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" disabled="true" v-model="formData.merchandiseName" placeholder="请输入" />
      </uni-forms-item>
      
      <uni-forms-item name="unloadPositionNo" label="鹤位号" required>
        <!-- <view class="title"></view> -->
        <!-- 下拉 -->
        <uni-easyinput type="text" v-model="formData.unloadPositionNo" placeholder="请输入" />
      </uni-forms-item>

      <uni-forms-item name="tankGroup" label="罐组号" required>
        <!-- <view class="title"></view> -->
        <uni-data-select
          v-model="formData.tankGroup"
          :localdata="groupList"
          :clear="false"
          @change="onChangeTankGroup"
          ></uni-data-select>
      </uni-forms-item>
      
      <uni-forms-item name="tankNo" label="储罐号" required>
        <!-- <view class="title"></view> -->
        <uni-data-select
          v-model="formData.tankNo"
          :localdata="groupNoList"
          :clear="false"
          ></uni-data-select>
      </uni-forms-item>

      <!-- <uni-forms-item name="Car_No" required>
        <view class="title">车牌号</view>
        <uni-easyinput type="text" v-model="formData.Car_No" placeholder="请输入" />
      </uni-forms-item> -->
      
      <uni-forms-item name="validate" label="验证码/IC卡号" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.validate" placeholder="请输入" />
      </uni-forms-item>

      <uni-forms-item name="userName" label="操作员" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.userName" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item name="beginDate" label="开始时间" required>
        <!-- <view class="title"></view> -->
        <uni-datetime-picker
          v-model="formData.beginDate"
          placeholder="请选择时间"
          type="datetime"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :hide-second="true"
          @change="changeTime">
        </uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="validateDate" label="有效期" required>
        <!-- <view class="title"></view> -->
        <uni-datetime-picker
          v-model="formData.validateDate"
          placeholder="请选择时间"
          type="datetime"
          valueFormat="YYYY-MM-DD HH:mm:ss"
          :hide-second="true"
          @change="changeTime">
        </uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="downloadDate" label="下装时间" required>
        <!-- <view class="title"></view> -->
        <uni-datetime-picker
          v-model="formData.downloadDate"
          placeholder="请选择时间"
          type="datetime"
          :hide-second="true"
          @change="changeTime">
        </uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="loadingEndDate" label="结束时间" required>
        <!-- <view class="title"></view> -->
        <uni-datetime-picker
          v-model="formData.loadingEndDate"
          placeholder="请选择时间"
          type="datetime"
          :hide-second="true"
          @change="changeTime">
        </uni-datetime-picker>
      </uni-forms-item>
      <uni-forms-item name="preWeight" label="定量(吨)" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.preWeight" placeholder="请输入" />
      </uni-forms-item>
      <!-- <uni-forms-item name="netWeightssssssssssss" required>
        <view class="title">实装量(吨)</view>
        <uni-easyinput type="text" v-model="formData.netWeightssssssssssss" placeholder="请输入" />
      </uni-forms-item> -->
      <uni-forms-item name="tareWeight" label="皮重(吨)" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.tareWeight" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item name="grossWeight" label="毛重" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.grossWeight" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item name="netWeight" label="净重" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.netWeight" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item name="settleAmount" label="结算量(吨)" required>
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.settleAmount" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item name="remark1" label="特性">
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.remark1" placeholder="请输入" />
      </uni-forms-item>
      <uni-forms-item name="remark2" label="其它">
        <!-- <view class="title"></view> -->
        <uni-easyinput type="text" v-model="formData.remark2" placeholder="请输入" />
      </uni-forms-item>
    </uni-forms>
    
    <div class="ft">
      <button type="primary" @click="handleSubmit">保存</button>
    </div>
  </view>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { apis as APIS } from "@/api/yiqiyipin.js";
import { router } from "@/router/index.js";
import { useRoute } from 'vue-router'
const route = useRoute()

const customerName = ref('')
const formData = ref({
  businessType: 1,  // 业务类型: 0-装车 1-卸车 2-装船 3-卸船
  customerName: '',
  customerId: null,
  unloadPositionNo: '',
  tankGroup: '',
  tankNo: '',
  // carNo: '',
  userName: '',
  validate: '',
  beginDate: '',
  validateDate: '',
  downloadDate: '',
  loadingEndDate: '',
  preWeight: '',
  tareWeight: '',
  grossWeight: '',
  netWeight: '',
  settleAmount: '',
  remark1: '',
  remark2: '',
  businessLnkId: route.query.businessLnkId,
  merchandiseId: route.query.merchandiseId,
  merchandiseName: decodeURIComponent(route.query.merchandiseName)
});

let { merchandiseName } = route.query

formData.value.merchandiseName = decodeURIComponent(decodeURIComponent(merchandiseName))

console.log('===decodeURIComponent======',decodeURIComponent(formData.value.merchandiseName))


onMounted(() => {
  let _data = localStorage.getItem('data')
  if(_data){
    formData.value = {
      ...JSON.parse(_data),
      businessLnkId: route.query.businessLnkId,
      merchandiseId: route.query.merchandiseId,
      merchandiseName: decodeURIComponent(route.query.merchandiseName)
    }
    customerName.value = {
      id: formData.value.customerId,
      enterpriseName: formData.value.customerName
    }
  }
});


const rules = ref({
  unloadPositionNo: {
    rules: [{ required: true, errorMessage: "请输入鹤位号" }]
  },
  tankGroup: {
    rules: [{ required: true, errorMessage: "请选择罐组号" }]
  },
  validate: {
    rules: [{ required: true, errorMessage: "请输入验证码/IC卡号" }]
  },
  beginDate: {
    rules: [{ required: true, errorMessage: "请选择开始时间" }]
  },
  validateDate: {
    rules: [{ required: true, errorMessage: "请选择有效期" }]
  },
  downloadDate: {
    rules: [{ required: true, errorMessage: "请选择下装时间" }]
  },
  loadingEndDate: {
    rules: [{ required: true, errorMessage: "请选择结束时间" }]
  }
});

const optionItems = [
  {
    value: "0",
    text: "装车",
  },
  {
    value: "1",
    text: "卸车",
  },
  {
    value: "3",
    text: "装船",
  },
  {
    value: "4",
    text: "卸船",
  }
]

// 客户名称
const enterpriseList = ref([])
const fGetEnterpriseList = (e) => {
  APIS.enterpriseList().then((res) => {
    if(res.code === 200){
      res.data.map(item => {
        enterpriseList.value.push({
          value: {
            id: item.id,
            enterpriseName: item.enterpriseName
          },
          text: item.enterpriseName
        })
      })
    }
  });

  console.log(enterpriseList.value)
}
fGetEnterpriseList()

// 根据储罐组查储罐号列表
const onChangeTankGroup = (e) => {
  console.log('e: ', e)
  fTankGroupNo(e)
}

// 储罐罐组列表
const groupList = ref([])
const fTankGroupList = (e) => {
  APIS.tankGroupList().then((res) => {
    if(res.code === 200){
      res.data.map(item => {
        groupList.value.push({
          value: item.tankGroupNo,
          text: item.tankGroupNo
        })
      })
    }
  });
}
fTankGroupList()

// 储罐号列表 
const groupNoList = ref([])
const fTankGroupNo = (val) => {
  APIS.tankGroupNo(val).then((res) => {
    if(res.code === 200){
      res.data.map(item => {
        groupNoList.value.push({
          value: item.tankNo,
          text: item.tankNo
        })
      })
    }
  });
}

const formRef = ref();
const handleSubmit = (data) => {
  formRef.value.validate().then((res) => {
    let data = {
      ...formData.value,
      customerName: customerName.value.enterpriseName,
      customerId: customerName.value.id,
      beginDate: `${formData.value.beginDate}:00`,
      validateDate: `${formData.value.validateDate}:00`,
      downloadDate: `${formData.value.downloadDate}:00`,
      loadingEndDate: `${formData.value.loadingEndDate}:00`
    }

    APIS.traceToTank(data).then((res) => {
      if(res.code === 200){
        localStorage.setItem('data', JSON.stringify(data))
        uni.showToast({
          title: '保存成功！',
          icon: 'success',
          duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
          mask:false, // 是否显示透明蒙层，防止触摸穿透，默认：false
        });
        setTimeout(() => {
          router.toPage({
            path: "/pages/home/index"
          });
        }, 2000);
      }
    });
  })
  .catch((err) => {
    console.log("表单错误信息", err);
  });
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20upx;
  background: #fff;

  .title{
    font-weight: 500;
    font-size: 30upx;
    padding-bottom: 10upx;
  }

  .form{
    padding-bottom: 70upx;
  }

  .ft{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
  }
}
</style>
